<template>
  <div v-if="form.emotion_abalienation" class="container">
    <div class="table">
      <h2>情绪/精神紊乱病人</h2>
      <h2>
        {{ form['emotDisorders'] && form['emotDisorders'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr>
          <Item
            header
            label="情绪状态"
            :value="form['emotion_abalienation'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="精神状态"
            :value="form['mental_state_abalienation'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="家属状态"
            :value="form['family_attitude_abalienation'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="遭受忽视或虐待现象"
            :value="form['neglect_abuse'].value"
          />
        </tr>
        <tr>
          <Item header label="照顾者" :value="form['caregiver'].value" />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>吸毒/酗酒病人</h2>
      <h2>
        {{ form['drugPatients'] && form['drugPatients'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr>
          <Item
            class="w-30"
            header
            label="依赖物"
            :value="form['dependency'].value"
          />
          <Item
            label="起始时间"
            :value="formatTime(form['startTime'].value, 'yyyy-MM-dd')"
          />
        </tr>
        <tr>
          <Item header label="家庭因素" :value="form['family_factors'].value" />
        </tr>
        <tr>
          <Item
            header
            label="戒断症状"
            :value="form['family_withdrawal_symptoms'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="性格改变"
            :value="form['personality_change'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="家属态度"
            :value="
              formatOptions(
                'family_attitude',
                'family_attitude_content',
                '其他'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="是否配合治疗"
            :value="form['cooperate_with_treatment'].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>受虐待/忽视病人</h2>
      <h2>
        {{
          form['abusedNeglected'] && form['abusedNeglected'].value ? '是' : '否'
        }}
      </h2>
      <table>
        <tr>
          <Item
            header
            label="受伤部位"
            :value="
              formatOptions('injured_area_abuse', 'injured_area_area', '其他')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="伤口性质"
            :value="
              formatOptions(
                'injury_nature_abuse',
                'injury_nature_abuse_cont',
                '其他'
              )
            "
          />
        </tr>
        <tr>
          <Item header label="情绪状态" :value="form['emotion_abuse'].value" />
        </tr>
        <tr>
          <Item
            header
            label="是否需要心理疏导"
            :value="form['need_psychological_counseling'].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>生命末期病人</h2>
      <h2>{{ form['endOfLife'] && form['endOfLife'].value ? '是' : '否' }}</h2>
      <table>
        <tr>
          <Item
            header
            label="加重身体不适症状的因素"
            :value="
              formatOptions(
                'fact_aggr_phys_disc',
                'fact_aggr_phys_disc_cont',
                '有'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="缓解身体不适症状的因素"
            :value="
              formatOptions(
                'fact_for_reli_phys_disc',
                'fact_for_reli_phys_disc_cont',
                '有'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="目前的处置是否有缓解病人身体的不适"
            :value="form['is_fact_for_reli_phys_disc'].value"
          />
        </tr>
        <tr>
          <Item header label="心理社会问题" />
        </tr>
        <tr>
          <Item
            header
            label="病人"
            :value="
              formatOptions(
                'psychosocial_problems_endLife',
                'psychosocial_problems_endLife_cont',
                '其他'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="家属"
            :value="
              formatOptions(
                'psychl_probl_endLife_family_members',
                'psychl_probl_endLife_family_members_cont',
                '其他'
              )
            "
          />
        </tr>
        <tr>
          <Item header label="灵性宗教需求" />
        </tr>
        <tr>
          <Item
            header
            label="病人"
            :value="
              formatOptions(
                'spiritual_religious_needs',
                'spiritual_religious_needs_cont',
                '其他'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="家属"
            :value="
              formatOptions(
                'spiritual_religious_needs_amily_members',
                'spiritual_religious_needs_amily_members_cont',
                '其他'
              )
            "
          />
        </tr>
      </table>
    </div>

    <table class="sum">
      <tr>
        <td class="label">资料来源</td>
        <td>{{ data.dataSrc === '其他' ? data.dataExt : data.dataSrc }}</td>
      </tr>
      <tr>
        <td class="label">评估时间</td>
        <td>
          <span>{{ formatTime(data.pfTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          <span class="sign">评估护士签名：{{ data.updateName }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'
import config from '@/views/homeNew/evaluation/json/specPopulation2.json' //配置信息

import Item from '../RYItem.vue'

export default defineComponent({
  components: { Item },
  props: {
    data: {
      type: Object,
      default: () => {
        return { jsonText: '{}' }
      }
    }
  },
  setup(props) {
    const state = reactive({
      date: '',
      value: '12',
      config: config,
      form: {}
    })

    function initData() {
      //初始化数据
      const form = {}, //表单对象
        config = cloneDeep(state.config) //配置项
      for (const x in config) {
        if (config[x].isVisible) {
          form[config[x].formName] = {
            label: config[x].formTitle,
            value: true
          }
          for (const y in config[x].data) {
            for (const z in config[x].data[y].data1) {
              for (const i in config[x].data[y].data1[z].data2) {
                const obj = config[x].data[y].data1[z].data2[i]
                if (obj.key) {
                  form[obj.key] = {
                    label: obj.desc,
                    value: ''
                  }
                }
              }
            }
          }
        }
      }
      //由于Object.assign对于子对象的处理是直接覆盖，所以需要循环赋值，用于保留子对象的其余参数
      const _data = JSON.parse(props.data.jsonText) || {}
      for (const i in form) {
        form[i] = Object.assign(form[i], _data[i] || '')
      }
      state.form = form
    }

    function formatOptions(el1, el2, text = '其他') {
      return state.form[el1].value === text
        ? state.form[el2].value
        : state.form[el1].value
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      formatOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  margin: getpx(30) auto 0;
  width: calc(100% - 126px);
  border-top: 1px solid #000;
  font-family: SiYuanSong-Medium;
}

table {
  margin-left: -1px;
  border-collapse: collapse;

  tr {
    display: flex;
    align-items: center;
    border: $border;

    &:not(:first-child) {
      margin-top: -1px;
    }

    td {
      padding: 2px;
      height: getpx(96);
      display: flex;
      align-items: center;
      font-size: getpx(36);
    }
  }
}

.table {
  display: grid;
  grid-template-columns: getpx(170) getpx(240) auto;
  box-sizing: border-box;

  & + .table {
    margin-top: -1px;
  }

  h2 {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: normal;
    font-size: getpx(60);
    border: $border;

    & + h2 {
      margin-left: -1px;
    }

    &:nth-child(1) {
      padding: 0 getpx(26);
      font-size: getpx(40);
    }

    &:nth-child(2) {
      font-size: getpx(32);
    }
  }

  table {
    margin-left: -2px;
  }
}

.sum {
  margin: -1px 0 0;
  width: 100%;

  tr {
    td {
      &.label {
        width: getpx(404);
        height: 19px;
        justify-content: center;
        border-right: 1px solid #000;
        font-size: getpx(48);

        &::after {
          content: ':';
        }
      }

      span {
        display: inline-block;

        &.sign {
          width: 50%;
          text-align: left;
        }
      }

      &:nth-child(2) {
        margin-left: -1px;
        border-left: 1px solid #000;
      }
    }

    &:nth-child(2) {
      td {
        &:nth-child(2) {
          flex: 2;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(3) {
      span {
        margin-right: getpx(51);
      }
    }
  }
}

.w-10 {
  min-width: 10%;
}

.w-15 {
  min-width: 15%;
}

.w-16 {
  min-width: 16%;
}

.w-17 {
  min-width: 17%;
}

.w-19 {
  min-width: 19%;
}

.w-20 {
  min-width: 20%;
}

.w-25 {
  min-width: 25%;
}

.w-30 {
  min-width: 30%;
}

.w-33 {
  min-width: 33%;
}

.w-40 {
  min-width: 40%;
}

.w-42 {
  min-width: 42%;
}

.w-45 {
  min-width: 45%;
}

.w-58 {
  min-width: 58%;
}
</style>
